<template>
  <view class="goods-detail">
    <!-- 1 轮播图 -->
    <u-swiper
      @click="handlePreviewImage"
      height="497"
      :list="goodsDetail.pics"
      name="pics_big"
    ></u-swiper>
    <!-- 1 轮播图 -->

    <!-- 2 商品名称 -->
    <view class="goods-name">{{ goodsDetail.goods_name }}</view>
    <!-- 3 商品价格 -->
    <view class="goods-price"> ￥{{ goodsDetail.goods_price }}</view>
    <!-- 4 图文详情 富文本 -->
    <!-- 
      1 rich-text  原生小程序内置  简单数据 使用它
      2 v-html     vue语法提供
      3 u-parse    uview组件提供  复杂数据 使用它
     -->
    <!-- <rich-text :nodes="goodsDetail.goods_introduce"></rich-text> -->
    <!-- <view v-html="goodsDetail.goods_introduce"></view> -->
    <view v-html="goodsDetail.goods_introduce"></view>

    <!-- 5 底部购物 提交订单栏  -->
    <view class="submit-bar">
      <SubmitBar :goodsDetail="goodsDetail"></SubmitBar>
    </view>
  </view>
</template>

<script>
import SubmitBar from "./components/submitBar.vue";
export default {
  components: { SubmitBar },
  data() {
    return {
      // 商品详情数据
      goodsDetail: null,
    };
  },
  onLoad(options) {
    // console.log(options.goods_id);
    // 先写死商品id 43986
    this.getGoodsDetail(options.goods_id);
  },

  methods: {
    // 根据id 获取商品详情
    async getGoodsDetail(goods_id) {
      const result = await this.$u.get("/goods/detail", { goods_id });
      console.log(result);
      this.goodsDetail = result.message;
    },

    // 点击轮播图
    // index  你当前点击的第几张图片
    handlePreviewImage(index) {
      // 获取要放大预览的图片数组
      const urls = this.goodsDetail.pics.map((v) => v.pics_big);
      // 指定当前被点击的图片的url
      const current = urls[index];
      // 调用放大预览的api
      uni.previewImage({ urls, current });
    },
  },
};
</script>

<style lang="scss">
.goods-detail {
  padding-bottom: 102rpx;
}
.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
